<template>
  <div>
    <el-row style="height: 45px; margin-left: 10px;">
      <el-col :span="12">
        <el-form
          :inline="true"
          :model="form"
          ref="form"
          style="margin-bottom: -18px;">
          <el-form-item prop="name">
            <el-input
              size="mini"
              class="input-parent"
              v-model="form.name"
              prefix-icon="el-icon-search"
              placeholder="请输入分组编码或分组名称"
              style="width: 300px;"
              @keyup.enter.native="handleParentFormSubmit"
              :clearable="true"/>
            <!-- <el-input
              size="mini"
              v-model="form.username1"
              prefix-icon="el-icon-search"
              placeholder="分组名称"
              style="width: 200px;"
              :clearable="true"/> -->
            <el-button
              size="mini"
              @click="handleParentFormSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12" style="height: 45px;">
        <el-form :model="searchChildrenForm">
          <el-form-item prop="code">
            <el-input
              v-model="searchChildrenForm.code"
              prefix-icon="el-icon-search"
              placeholder="请输入字典编码"
              size="mini"
              @keyup.enter.native="handleChildrenFormSubmit"
              style="width: 300px;"
              :clearable="true"/>
            <el-button
              size="mini"
              @click="handleChildrenFormSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  selectChildrenDictCode,
  selectData
} from '@/api/auth/dict.js'
import bus from '@/api/auth/dictBus.js'
export default {
  props: {
    loading: {
      default: false
    },
    group: {
      default: () => {}
    }
  },
  data() {
    return {
      addParentFlag: false,
      addChildrenFlag: false,
      form: {
        name: ''
      },
      searchChildrenForm: {
        code: ''
      },
      searchData: [],
      searchParentData: []
    }
  },
  methods: {
    // 提交表单
    handleChildrenFormSubmit() {
      selectChildrenDictCode({ code: this.searchChildrenForm.code }).then(res => {
        this.searchData = res.data
        bus.$emit('inquireData', this.searchData)
      })
      this.searchChildrenForm.code = null
    },
    handleParentFormSubmit() {
      selectData({ name: this.form.name }).then(res => {
        this.searchParentData = res.data
        bus.$emit('inquireParentData', this.searchParentData)
      })
      this.searchChildrenForm.code = null
    }
  }
}
</script>

<style scoped>
  .more-filter {
    margin-bottom: -18px;
  }
  .more-filter >>> label {
    width: 70px;
  }
  .more-filter >>> .el-form-item__content {
    margin-left: 70px;
  }
  .input-parent{
    margin-left: -10px;
  }
  .el-input{
    margin-right: 10px;
  }
</style>
